<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客网站</title>
    <link rel="stylesheet" href="./css/Base.css">
    <link rel="stylesheet" href="./css/lunBoTu.css">
    <link rel="stylesheet" href="./css/Header.css">
    <link rel="stylesheet" href="./css/Main.css">
    <link rel="stylesheet" href="./css/newTrends.css">
    <link rel="stylesheet" href="./css/Footer.css">
    <link rel="stylesheet" href="./css/addBox.css">
</head>
<body>
    <div class="Box">
        <div class="Header">
            <div class="Nav">
               <a href="#" style="color: rgb(0,179,239);">首页</a>
               <a href="#" class="addText" onclick="addText()">发表文章</a>
               <a href="#" class="" >沸点</a>
               <a href="#" class="" >课程</a>
               <a href="#" class="" >直播</a>
               <a href="#" class="" >活动</a>
               <a href="#" class="" >竞赛</a>
               <div class="Nav-query-box">
                   <input type="text" class="queryInput" id=""  placeholder="请输入关键字">
                   <input type="button" value="搜索" class="queryBtn">
               </div>
               <button class="loginBtn" onclick="idxLoginBtn()">登录</button>

            </div>
            <!-- 轮播图 -->
            <div class="lunbo">
                <div class="content">
                <ul id="contentUl">
                    <li class="contentItem">
                        <a href="#"><img src="./images/LunBoTu1.jpg" ></a>
                    </li>
                    <li class="contentItem">
                        <a href="#"><img src="./images/LunBoTu2.jpg" ></a>
                    </li>
                    <li class="contentItem">
                        <a href="#"><img src="./images/LunBoTu3.jpg" ></a>
                    </li>
                </ul>
                <div id="btn-left"><</div>
                <div id="btn-right">></div>
                <ul id="circle">
                    <li class="circle"></li>
                    <li class="circle"></li>
                    <li class="circle"></li>
                </ul>
                </div>
            </div>
        </div>
        <div class="Main">
            <div class="Center">
                <div class="centerLeft">
                    <div class="centerNav">
                        <ul>
                            <li style="color: rgb(0,179,239);">最新</li>
                            <li>专栏</li>
                            <li>推荐</li>
                        </ul>
                    </div>
                    <table id="tb"></table>
                    <div class="fenYe">
                        <a href="">1</a>
                        <a href="">2</a>
                        <a href="">3</a>
                        <a href="">...</a>
                        <a href="">100</a>
                        <a href="">></a>
                    </div>
                </div>

                <div class="centerRight">
                    <div class="qianDao">
                        <div class="qianDaoLeft">
                            <span class="span1">早上好！</span>
                            <span class="span2">点亮在社区的每一天</span>
                        </div>
                        <button>签到</button>
                    </div>
                    <div class="tuiJianHuaTi">
                        <p class="tuiJianP">
                            推荐话题
                            <span>
                            <img src="./images/huanyihuan.png" alt="">
                               <span class="huanyihuan">换一换</span> 
                               
                            </span>
                        </p>
                        <ul>
                            <li>
                               <span>#创作者训练营#</span> 
                                1.4m
                            </li>
                            <li>
                                <span>#人工智能创作者签约季#</span>
                                2.4m
                            </li>
                            <li>
                                <span>#1024一起掘金#</span>
                                9.2m
                            </li>
                            <li>
                                <span>#一书一世界#</span>
                                1.5k
                            </li>
                            <li>
                                <span>#每日精选文章#</span>
                                3.2k
                            </li>
                            <li>
                                <span>#前端开发现状#</span>
                                1.6m
                            </li>
                            <li>
                                <span>#孤雁古语#</span>
                                2.2k
                            </li>
                            <li >
                                <span>#爆笑名场面#</span>
                                6.5k
                            </li>
                            <li style="border-bottom: solid 1px rgb(219, 217, 217);">
                                <span></span>
                            </li>
                          </ul>
                          <p>
                            <span>查看更多></span>
                          </p>
                    </div>
                    <div id="readList">
                        <h3>48小时阅读排行</h3>
                    </div>
                    <div class="frendsTuiJian">
                        <p>你愿意向朋友推荐博客首页吗？</p>
                        <ul>
                            <li>
                                <img src="./images/ic_nps_01@2x.aeaa81cd.png" alt="">
                                <span>很不推荐</span>
                            </li>
                            <li>
                                <img src="./images/ic_nps_02@2x.e3d8b9e9.png" alt="">
                                <span>不推荐</span>
                            </li>
                            <li>
                                <img src="./images/ic_nps_03@2x.86695fcc.png" alt="">
                                <span>一般</span>
                                
                            </li>
                            <li>
                                <img src="./images/ic_nps_04@2x.9d555ad8.png" alt="">
                                <span>推荐</span>
                                
                            </li>
                            <li>
                                <img src="./images/ic_nps_05@2x.6c932296.png" alt="">
                                <span>强烈推荐</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="newTrends">
            <div class="newTrends-top-box">
                <h4>最新资讯</h4>
                <div class="newTrends-left">
                    <div class="newTrends-left-img">
                        <img src="./images/leftImage.jpg" alt="">
                    </div>
                    <div class="newTrends-left-Span">
                        <div class="newTrends-left-time">
                            2023.10.19
                        </div>
                        <div class="newTrends-left-explain">
                            <span class="span1">在生成式AI中寻求平衡：开源模型与专有模型之争</span> <br><br>
                            <span class="span2">全球企业和消费者主要采用闭源的生成式AI还是开源的生成式AI，或者均衡使用两种模型，将是问题的关键。</span>
                        </div>
                    </div>
                </div>
                <div class="newTrends-right">
                <div class="newTrends-right-img">
                    <img src="./images/rightImage.jpg" alt="">
                </div>
                <div class="newTrends-right-Span">
                    <div class="newTrends-right-time">
                        2023.11.30
                    </div>
                    <div class="newTrends-right-explain">
                        <span class="span1">2023 Digital for Life Festival回顾：腾讯与COMEBACK向新加坡社区倡导健康游戏</span> <br><br>
                        <span class="span2">腾讯携手新加坡社会企业，参与了当地一场以提高数字素养和身心健康为主题的活动，并开展了一系列工作坊和游戏竞赛。</span><br><br>
                        <span class="span3">随着电子游戏成为我们生活中不可或缺的一部分，产业相关方、政府机构和社区利益相关者，在为年轻玩家创造安全空间和健康游戏环境方面，发挥着至关重要的作用。</span>
                    </div>
                </div>
                </div>
            </div>
        </div>
        <div class="Footer">
            <div class="footerSpan1">
                <ul>
                    <li>友情链接：阿里云</li>
                    <li>腾讯云</li>
                    <li>天翼云</li>
                    <li>山海鲸可视化</li>
                    <li>站长之家</li>
                    <li>腾讯WeTest</li>
                    <li>爱微帮</li>
                </ul>
            </div> 
            <div class="footerSpan2">
                <ul>
                    <li>关于博客园</li>
                    <li>联系我们</li>
                    <li>商务合作</li>
                    <li>赞助</li>
                    <li>&copy;2023</li>
                    <li>博客园</li>
                    <li>保留所有权利</li>
                    <li>闽ICP备000001号</li>
                </ul>
            </div>
        </div>
        <div class="addBox">
            <form action="">
                <h4>添加文章</h4>
                <img src="./images/closeIcon.png" width="6%" height="6%" onclick="closeAdd()">
                <table>
                    <tr>
                        <td>id：</td>
                        <td><input disabled="disabled" class="addID" style="width: 343.3px;" type="text" name="" id=""></td>
                    </tr>
                    <tr>
                        <td>标题：</td>&nbsp;&nbsp;
                        <td><input class="addTitle" style="width: 343.3px;" type="text" name="" id=""></td>
                    </tr>
                    <tr>
                        <td>内容：</td>
                        <td><textarea class="addContent" name="" id="" cols="36" rows="5"></textarea></td>
                    </tr>
                    <input class="addBtn" type="button" value="发表文章" onclick="addBtn()"></td>
                </table>
            </form>
        </div>

    </div>

    <script src="./index.js"></script>
    <!-- 轮播图 -->
    <script>
        var items = document.getElementsByClassName("contentItem");
        var circles = document.getElementsByClassName("circle");
        var leftBtn = document.getElementById("btn-left");
        var rightBtn = document.getElementById("btn-right");
        var content = document.querySelector('.content');


        var index = 0;
        var timer = null;
        getIndexImages();
        function getIndexImages() {
            items[0].className = "contentItem active";
            circles[0].className = "circle white";
        }
        //清除class
        var clearclass = function () {
            //按钮 图片索引小于0时 从最后一张开始
            if (index < 0) {
                index=items.length-1
                for (let i = 0; i < items.length; i++) {
                    items[i].className = "contentItem";
                    circles[i].className = "circle";
                    circles[i].setAttribute("num", i);
                }
            } else {
                for (let i = 0; i < items.length; i++) {
                    items[i].className = "contentItem";
                    circles[i].className = "circle";
                    circles[i].setAttribute("num", i);
                }
            }
        }
        /*只显示一个class*/
        function move() {
            clearclass();
            items[index].className = "contentItem active";
            circles[index].className = "circle white";
        }
        //点击右边按钮切换下一张图片
        rightBtn.onclick = function () {
            if (index < items.length - 1) {
                index++;
            }
            else {
                index = 0;
            }
            move();
        }
        //点击左边按钮切换上一张图片
        leftBtn.onclick = function () {
            if (index < items.length) {
                index--;
            }
            else {
                index = items.length - 1;
            }
            move();
        }
        //开始定时器，点击右边按钮，实现轮播
        timer = setInterval(function () {
            rightBtn.onclick();
        }, 3000)
        //点击圆点时，跳转到对应图片
        for (var i = 0; i < circles.length; i++) {
            circles[i].addEventListener("click", function () {
                var point_index = this.getAttribute("num");
                index = point_index;
                move();
            })
        }
        //鼠标移入清除定时器，并开启一个三秒的定时器，使慢慢转动
        content.onmouseover = function () {
            clearInterval(timer);
            timer = setInterval(function () {
                rightBtn.onclick();
            }, 3000)
        }
        //鼠标移出又开启定时器
        content.onmouseleave = function () {
            clearInterval(timer);
            timer = setInterval(function () {
                rightBtn.onclick();
            }, 3000)
        }
    </script>
</body>
</html>